<template>
  <div class="main">
    <div class="chat-header" @click="goBack()">
      <i class="el-icon-arrow-left" style="margin-right: 5px"></i>
      <van-image style="display: flex;
			justify-content: center;
			align-items: center;
			width: 30px;height: 30px;border:1px solid rgb(255, 255, 255);margin-right: 10px;"
                 :src="activeChat.headImage?store.state.imgUrl+ activeChat.headImage:logo" round
      ></van-image>
      {{ title }}
    </div>
    <!--    <div v-if="loading" style="font-size: 13px;">加载中...</div>-->
    <div class="chat-content" id="chatScrollBox">
      <div v-if="flagName=='商品'" class="xfk" style="border-radius: 10px;padding: 11px;background: #ffffff;margin-bottom: 10px;position: sticky;
    top: 44px;z-index: 999" :class="{'hidden': productSent}">
        <div style="display: flex;justify-content: flex-start;align-items: center;">
          <img :src=" store.state.imgUrl + goods.goodPics.split(',')[0]" style="width: 85px;height: 85px;"
               @click="gotoDetail(goods)"/>
          <div style="margin-left: 10px;text-align: left" @click="gotoDetail(goods)">
            <div style="font-size: 14px;font-weight: 400;color: rgba(29, 22, 23, 1);">{{ goods.name }}</div>
            <div style="display:flex;justify-content: space-between;align-items: center;margin-top: 10px;">
              <div style="font-size: 18px;font-weight: 500;color: rgba(255, 0, 0, 1);">￥{{ goods.price }}</div>
              <div style="font-size: 14px;font-weight: 400;color: rgba(199, 199, 199, 1);text-decoration: line-through">
                ￥{{ goods.oldPrice }}
              </div>
            </div>
          </div>
          <div style="background:rgba(242, 150, 0, 1);padding: 5px;color: #ffffff;margin-left: auto;border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;" @click="sendGoodMessage">
            发送商品
          </div>
        </div>
      </div>
      <!--      @scroll="handleScroll"-->
      <!--      <div v-for="(itemc,indexc) in recordContent" :key="indexc">-->
      <div class="im-chat-box">
        <ul v-if="activeChat.messages">
          <li v-for="(msgInfo,idx) in activeChat.messages" :key="idx">
            <chat-message-item ref="chatMessageItem" :mine="msgInfo.sendId == mine.id"
                               :headImage="headImage(msgInfo)"
                               :showName="showName(msgInfo)"
                               :msgInfo="msgInfo"
                               :loading="loading(msgInfo)"
                               :loadFail="loadFail(msgInfo)"
            >
            </chat-message-item>
          </li>
        </ul>
        <!--        </div>-->
      </div>
    </div>
    <full-image :visible="uiStore.fullImage.show" :url="uiStore.fullImage.url"
                @close="$store.commit('closeFullImageBox')"></full-image>
    <div class="chat-message">
      <img src="../..//assets/yuyin.png" style="width: 28px;height: 28px;" @click="sendVideo" v-if="isVideo"/>
      <img src="../../assets/icon_jp.png" style="width: 28px;height: 28px;" @click="sendVideo" v-if="!isVideo"/>
      <div id="recordBtn" v-if="!isVideo"
           class="recordBtn" @click="showVoiceBox">
        {{ soundTips }}
        <!--      @touchstart="startRecording" @touchend="stopRecording" @touchmove="moveRecording-->
        <!--        @click="startRecording"-->
      </div>
      <!--      <el-input v-model="sendText" placeholder="输入聊天内容" ref="sendBox" class="input"-->
      <!--                v-if="isVideo"></el-input>-->
      <div class="input-container">
        <van-field v-model="sendText" ref="sendBox" placeholder="请输入聊天内容" class="input" v-if="isVideo"/>
      </div>
      <div class="chat-button">
        <el-button type="primary" size='medium' class="send" @click="sendTextMessage()">发送</el-button>
      </div>
      <!--      <el-upload :action="action" :headers="uploadHeaders" :accept="fileTypes==null?'':fileTypes.join(',')">-->
      <!--            <i class="el-icon-circle-plus"></i>-->
      <!--      </el-upload>>-->
      <chat-voice :visible="showVoice" @close="closeVoiceBox" @send="handleSendVoice"></chat-voice>
      <!--      <el-dialog :visible.sync="showVoice">{{ soundPopTip }}</el-dialog>-->
      <file-upload :action="imageAction" :maxSize="5*1024*1024"
                   :fileTypes="['image/jpeg', 'image/png', 'image/jpg', 'image/webp','image/gif']"
                   @before="handleImageBefore" @success="handleImageSuccess" @fail="handleImageFail">
        <i class="el-icon-circle-plus" style="color: rgba(242, 150, 0, 1);margin-left: 5px;font-size: 28px;"></i>
      </file-upload>
      <!--      <img src="../../assets/icon_plus.png" class="chooseImage" @click="chooseImage"/>-->
    </div>
  </div>
</template>

<script>
import {jsapiList} from "@/api/api";
import wx from "weixin-js-sdk";
import httpRequest from "@/api/httpRequest";
import ChatMessageItem from "@/views/chat/component/ChatMessageItem";
import FullImage from '@/views/chat/component/FullImage';
import FileUpload from "@/views/chat/component/FileUpload";
import ChatVoice from "@/views/chat/component/ChatVoice";
import {mapState} from "vuex";
import store from '../../store';

export default {
  name: "customer_consulation_chat_offic",
  components: {
    ChatMessageItem,
    FullImage,
    FileUpload,
    ChatVoice
  },
  data() {
    return {
      productSent: false,
      store: store,
      isVideo: true,
      logo: require("@/assets/tx.png"),
      // recordContent: [],
      current: 0,
      size: 100,
      localImageIds: '',
      localVideoId: '',
      chat: {},
      sendText: '',
      avatarUrl: '',
      showVoice: false, //是否显示语音录制弹窗
      soundTips: '开始说话',
      soundPopTip: '',
      flagName: '我的',
      shopId: '',
      activeChat: {
        targetId: 0,
        messages: [],
        type: 'PRIVATE',
      },
    }
  },
  async mounted() {
    setTimeout(() => {
      this.$refs.sendBox.focus()
    }, 500)
    this.shopId = this.$route.query.shopId
    await this.getShopKf().then((kfList) => {
      this.activeChat.headImage = kfList.headImage ? kfList.headImage : this.logo;
      this.activeChat.headImageThumb = kfList.headImageThumb
      this.activeChat.showName = kfList.nickName
      this.activeChat.targetId = kfList.id
    })
    console.log('kfList', this.activeChat)
    // this.chat = this.activeChat
    const recordContent = await this.getRecondList();
    this.activeChat.messages = recordContent
    this.$store.commit('editShopChats', this.activeChat)

    this.chat = this.activeChat
    // console.log('goods', this.goods)
    this.flagName = this.$route.query.flagName
    console.log('flagName', this.flagName)
    //调用接口已读和获取记录列表
    this.scrollToBottom();
    // this.$store.commit('setRecondList', recordContent)
    this.$forceUpdate()
    // this.$store.commit('activeMessage', newRecords);
    this.getReadMessage();
  },
  watch: {
    // num: {
    //   handler(newVal, oldVal) {
    //     console.log('xxx', this.chatStore.chats[this.chatStore.activeIndex])
    //     // that.$nextTick(() => {
    //     this.activeChat = this.chatStore.chats[this.chatStore.activeIndex]
    //     // this.$set(that, 'activeChat', this.chatStore.chats[this.chatStore.activeIndex])
    //     this.$forceUpdate()
    //     console.log('监听message', this.activeChat.messages)
    //     // })
    //     this.scrollToBottom()
    //     console.log('监听到新的值并滚动', this.activeChat)
    //   }
    // },
    // 'chatStore.chats': {
    //   handler(newChats, oldChats) {
    //     console.log('监听到数据变化', this.chatStore.activeIndex);
    //     this.updateActiveChat(0)
    //   },
    //   deep: true
    // }
  },
  computed: {
    ...mapState('shopping', ['goods']),
    chatStore() {
      return this.$store.state.chatStore
    },
    num() {
      return this.$store.state.chatStore.num
    },
    // activeChat() {
    // let index = this.chatStore.activeIndex;
    // let chats = this.chatStore.chats.find((item) => {
    //   return item.targetId == 288
    // })
    // return this.chatStore.chats[0]
    // },
    uiStore() {
      return this.$store.state.uiStore;
    },
    mine() {
      return this.$store.state.userStore.userInfo;
    },
    title() {
      let title = this.chat.showName;
      return title;
    },
    messageAction() {
      return `/message/${this.activeChat.type.toLowerCase()}/send`;
    },
    imageAction() {
      // return `${process.env.VUE_APP_BASE_API}/image/upload`;
      return `${this.$store.state.baseUrlSecond}/image/upload`;
      // return 'https://wechat.yasee.com.cn:8888/image/upload';
    },
    ...mapState(['userInfo']),
  },
  methods: {
    gotoPersonal() {
      console.log('item', this.activeChat)
      // if (item.isOwn == 0) {//跳转到自己的个人主页
      //   this.$router.push({path: '/personalPage', query: {obj: this.activeChat}})
      // } else {//跳转到别人主页的个人主页
      this.$router.push({path: '/visitPersonal', query: {obj: JSON.stringify(this.activeChat)}})
      // }
      let message = {
        action: 'hiddenBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    getShopKf() {
      return new Promise((resolve, reject) => {
        let data = {
          id: this.shopId,
          userId: this.userInfo.userId
        }
        httpRequest({
          url: `/friend/bdShopAndUser`,
          method: 'get',
          params: data
        }).then((res) => {
          resolve(res)
        })
      })
    },
    getRecondList() {
      let query1 = {
        friendId: this.activeChat.targetId,
        current: this.current,
        size: this.size,
        type: 0
      }
      return new Promise((resolve, reject) => {
        httpRequest({
          url: '/message/private/getMessage',
          method: 'get',
          params: query1
        }).then((res) => {
          resolve(res.records)
        }).catch((error) => {
          reject(error)
        })
      })
    },
    gotoDetail(item) {
      this.$store.state.isShopping = 0
      console.log('商品跳转到详情', item)
      this.$store.dispatch('shopping/setDetailId', item.id)
      this.$store.dispatch('shopping/setSkuId', item.skuId)
      this.$router.push({
        path: "/detail", query: {}
      });
    },
    updateActiveChat(index) {
      let chats = this.chatStore.chats
      if (index >= 0 && chats.length > 0) {
        console.log('进入更新charts')
        // this.$nextTick(() => {
        this.activeChat = chats[index]
        console.log('activeChat', this.activeChat)
        this.scrollToBottom()
        // this.$forceUpdate()
        // })
      }
      // else {
      // this.activeChat = {
      //   targetId: -1,
      //   showName: "",
      //   headImage: "",
      //   messages: []
      // };
      // }
    },
    handleScroll() {
      const div = document.getElementById("chatScrollBox");
      const threshold = 30; // 设置一个阈值，表示离底部还有多少距离时触发加载
      if (div.scrollTop < threshold && !this.loading) {
        this.loadData();
      }
    },
    async loadData() {
      this.current += 1
      const newRecond = await this.getRecondList()
      if (newRecond.length === 0) {
        this.loading = true
      } else {
        this.$store.commit('addRecondList', newRecond);
        this.$forceUpdate()
      }
    },
    showVoiceBox() {
      this.showVoice = true;
    },
    closeVoiceBox() {
      this.showVoice = false;
    },
    headImage(msgInfo) {
      return msgInfo.sendId == this.mine.id ? this.mine.headImageThumb : this.chat.headImage
    },
    showName(msgInfo) {
      return msgInfo.sendId == this.mine.id ? this.mine.nickName : this.chat.showName
    },
    loading(msgInfo) {
      return msgInfo.loadStatus && msgInfo.loadStatus === "loading";
    },
    loadFail(msgInfo) {
      return msgInfo.loadStatus && msgInfo.loadStatus === "fail";
    },
    handleSendVoice(data) {
      let msgInfo = {
        content: JSON.stringify(data),
        type: 3
      }
      // 填充对方id
      this.setTargetId(msgInfo, this.chat.targetId);
      httpRequest({
        url: this.messageAction,
        method: 'post',
        data: msgInfo
      }).then((id) => {
        // this.$toast.success("发送成功");
        msgInfo.id = id;
        msgInfo.sendTime = new Date().getTime();
        msgInfo.sendId = this.$store.state.userStore.userInfo.id;
        msgInfo.selfSend = true;
        this.$store.commit("insertShopMessage", msgInfo);
        this.$forceUpdate()
        // 保持输入框焦点
        this.$refs.sendBox.focus();
        // 滚动到底部
        this.scrollToBottom();
        // 关闭录音窗口
        this.showVoice = false;
      })
    },
    scrollToBottom() {
      this.$nextTick(() => {
        setTimeout(() => {
          const div = document.getElementById("chatScrollBox");
          div.scrollTop = div.scrollHeight;
        }, 300); // 延迟 500 毫秒执行
      });
    },
    handleImageSuccess(res, file) {
      let msgInfo = JSON.parse(JSON.stringify(file.raw.msgInfo));
      msgInfo.content = JSON.stringify(res.data);
      httpRequest({
        url: this.messageAction,
        method: 'post',
        data: msgInfo
      }).then((id) => {
        this.loadStatus = 'ok'
        msgInfo.loadStatus = 'ok';
        msgInfo.id = id;
        console.log('loadStatus,上传成功', msgInfo.loadStatus)
        this.$store.commit("insertShopMessage", msgInfo);
        this.$forceUpdate()
      })
    },
    handleImageFail(res, file) {
      this.$store.dispatch('updateFailImageList', file)
      let msgInfo = JSON.parse(JSON.stringify(file.raw.msgInfo));
      msgInfo.loadStatus = 'fail';
      this.loadStatus = 'fail'
      this.$store.commit("insertShopMessage", msgInfo);
    },
    handleImageBefore(file) {
      let url = URL.createObjectURL(file);
      let data = {
        originUrl: url,
        thumbUrl: url
      }
      let msgInfo = {
        id: 0,
        fileId: file.uid,
        sendId: this.mine.id,
        content: JSON.stringify(data),
        sendTime: new Date().getTime(),
        selfSend: true,
        type: 1,
        loadStatus: "loading"
      }
      this.loadStatus = 'loading'
      // 填充对方id
      this.setTargetId(msgInfo, this.chat.targetId);
      // 插入消息
      console.log('loadStatus,上传之前', msgInfo.loadStatus)
      this.$store.commit("insertShopMessage", msgInfo);
      this.$forceUpdate()
      // 滚动到底部
      this.scrollToBottom();
      // 借助file对象保存
      file.msgInfo = msgInfo;
    },
    getReadMessage() {
      let query = {
        sendId: this.chat.targetId,
        recId: this.mine.id,
      }
      httpRequest({
        url: `/message/private/setReadMessage`,
        method: 'get',
        params: query
      }).then((res) => {
      })
    },

    setTargetId(msgInfo, targetId) {
      if (this.chat.type == "GROUP") {
        msgInfo.groupId = targetId;
      } else {
        msgInfo.recvId = targetId;
      }
    },
    sendGoodMessage() {
      let msgInfo = {
        content: JSON.stringify(this.goods),
        type: 4
      }
      console.log('发送商品参数', msgInfo)
      // 填充对方id
      this.setTargetId(msgInfo, this.chat.targetId);
      this.lockMessage = true;
      httpRequest({
        url: this.messageAction,
        method: 'post',
        data: msgInfo
      }).then((id) => {
        // this.$toast.success("商品发送成功");
        this.productSent = true
        msgInfo.id = id;
        msgInfo.sendTime = new Date().getTime();
        msgInfo.sendId = this.$store.state.userStore.userInfo.id;
        msgInfo.selfSend = true;
        this.$store.commit("insertShopMessage", msgInfo);
        // this.$store.commit("insertReconds", msgInfo);
        this.$forceUpdate()
      }).finally(() => {
        // 解除锁定
        this.lockMessage = false;
        // 保持输入框焦点
        this.$nextTick(() => this.$refs.sendBox.focus());
        // 滚动到底部
        this.scrollToBottom();
      })
    },
    sendTextMessage() {
      if (!this.sendText.trim()) {
        this.$toast.fail("不能发送空白信息");
        return
      }
      let msgInfo = {
        content: this.sendText,
        type: 0
      }
      // 填充对方id
      this.setTargetId(msgInfo, this.chat.targetId);
      this.lockMessage = true;
      httpRequest({
        url: this.messageAction,
        method: 'post',
        data: msgInfo
      }).then((id) => {
        // this.$toast.success("发送成功");
        this.sendText = "";
        msgInfo.id = id;
        msgInfo.sendTime = new Date().getTime();
        msgInfo.sendId = this.$store.state.userStore.userInfo.id;
        msgInfo.selfSend = true;
        this.$store.commit("insertShopMessage", msgInfo);
        // this.$store.commit("insertReconds", msgInfo);
        this.$forceUpdate()
      }).finally(() => {
        // 解除锁定
        this.lockMessage = false;
        // 保持输入框焦点
        this.$nextTick(() => this.$refs.sendBox.focus());
        // 滚动到底部
        this.scrollToBottom();
      })
      const e = window.event || arguments[0];
      if (e.key === 'Enter' || e.code === 'Enter' || e.keyCode === 13) {
        e.returnValue = false;
        e.preventDefault();
        return false;
      }
    },
    getParam(name) {
      if (window.location.hash.indexOf("?") != -1) {
        const query = window.location.hash.split("?")[1];
        const vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == name) {
            return pair[1];
          }
        }
      } else {
        return "";
      }
    },
    startRecording(event) {
      this.showVoice = true;
      this.soundTips = '松开 发送'
      this.soundPopTip = "正在录音";
      let formData = {
        accountId: this.accountCode,
        url: window.location.href.split('#')[0]
      };
      jsapiList(formData).then((res) => {
        const {data} = res;
        let _data = data;
        wx.config({
          debug: false,
          appId: _data.appId,
          timestamp: _data.timestamp,
          nonceStr: _data.nonceStr,
          signature: _data.signature,
          jsApiList: ['startRecord', 'stopRecord', 'onVoiceRecordEnd', 'uploadVoice']
        });
        let recordTouchY = Number(event.touches[0].pageY);
        console.log("开始录音");
        // 开始录音的时候 显示录音弹出框
        // this.isShowPopSoundBox = true;
        // this.soundTips = "松开 发送";
        // this.isCancelSound = false;
        wx.ready(function () {
          // 在这里调用微信的API
          wx.startRecord(); // 开始录音
        });
      }).catch((e) => {
        console.log(e)
      })
    },
    stopRecording() {
      console.log('结束录音');
      this.showVoice = false;
      this.soundTips = '按住说话'
      this.soundPopTip = "取消录音";
      let formData = {
        accountId: this.accountCode,
        url: window.location.href.split('#')[0]
      };
      jsapiList(formData).then((res) => {
        const {data} = res;
        let _data = data;
        wx.config({
          debug: false,
          appId: _data.appId,
          timestamp: _data.timestamp,
          nonceStr: _data.nonceStr,
          signature: _data.signature,
          jsApiList: ['startRecord', 'stopRecord', 'onVoiceRecordEnd', 'uploadVoice']
        });
        wx.ready(function () {
          // 在这里调用微信的API
          wx.stopRecord({
            success: function (res) {
              this.localVideoId = res.localId; // 返回录音的本地ID，用于后续接口调用
              // 在这里可以处理录音
              console.log('结束录音', this.localVideoId)
            }
          });
        });
      }).catch((e) => {
        console.log(e)
      })
    },
    moveRecording() {

    },
    sendVideo() {
      this.isVideo = !this.isVideo
    },
    chooseImage() {
      let that = this;
      const formData = {
        accountId: that.accountCode,
        url: window.location.href.split('#')[0]
      };
      jsapiList(formData).then((res) => {
        const {data} = res;
        let _data = data;
        wx.config({
          debug: false,
          appId: _data.appId,
          timestamp: _data.timestamp,
          nonceStr: _data.nonceStr,
          signature: _data.signature,
          jsApiList: ['chooseImage', 'uploadImage', 'getLocalImgData']
        });
        wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
          wx.chooseImage({
            count: 1,
            sizeType: ['original', 'compressed'],//图片类型，原图或压缩图
            sourceType: ['album', 'camera'], // 图片的来源，相册或相机
            success: (res) => {
              // const localData = res.localIds; //返回选定照片的本地ID列表，用于后续接口调用
              wx.getLocalImgData({
                localId: res.localIds[0].toString(),
                success: async (res) => {
                  const localData = res.localData;
                  let imageBase64 = '';
                  if (localData.indexOf('data:image') == 0) {
                    //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                    imageBase64 = localData;
                  } else {
                    //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                    //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                    imageBase64 = 'data:image/*;base64,' + localData.replace(/\n/g, '');
                  }
                  that.avatarUrl = imageBase64;
                  // const blob = await that.dataURLtoBlob(imageBase64)
                  const blob = await that.base64ToFile(imageBase64, 'image')
                  that.handleAvatar(blob);
                }
              });
            }
          })
        })
      }).catch((e) => {
        console.log(e)
      })
    },
    dataURLtoBlob(dataurl) {
      let arr = dataurl.split(',');
      let mime = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], {type: mime});
    },
    base64ToFile(data, filename) {
      var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
      let suffixArr = mime.split("/")
      if (suffixArr.length && !filename) {
        let suffix = suffixArr[suffixArr.length - 1]
        filename = new Date().getTime() + "-" + Math.floor((Math.random() * 10000)) + "." + suffix
      }
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type: mime});
    },
    handleAvatar(imageData) {
      // let that = this;
      let param = new FormData();
      param.append('file', imageData);
      httpRequest({
        url: "/image/upload",
        method: 'post',
        params: param,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }).then((res) => {
        console.log('上传服务器成功', res)
      })
    },
    goBack() {
      // let message = {
      //   action: 'showBottom',
      //   param: {}
      // }
      // getInfoFromVue.postMessage(JSON.stringify(message))
      this.$router.go(-1);
    },
  }
}
</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100vh;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  /*布局方向是垂直的*/
  flex-direction: column;

  .xfk {
  }

  .chat-header {
    font-size: 20px;
    font-weight: 500;
    padding: 0px 0px 0px 10px;
    height: 44px;
    line-height: 20px;
    //border-top: 1px solid #f0f0f0;
    background: rgba(242, 150, 0, 1);
    color: #ffffff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    align-items: center;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .chat-content {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    overflow: auto;
    padding: 5px;
    //padding-top: 50px;
    //padding-bottom: 50px;
    margin-bottom: 60px;
    background: rgba(240, 240, 240, 1);
    //border: 1px solid #f0f0f0;
    .hidden {
      display: none;
    }

    .im-chat-box {
      cursor: pointer;

      > ul {
        //padding: 20px;
        li {
          list-style-type: none;
        }
      }
    }

    .more {
      text-align: center;
      font-size: 10px;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .word {
      display: flex;
      margin-bottom: 20px;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .info {
        margin-left: 10px;

        .time {
          font-size: 12px;
          color: rgba(51, 51, 51, 0.8);
          margin: 0;
          height: 20px;
          line-height: 20px;
          margin-top: -5px;
        }

        .info-content {
          padding: 10px;
          font-size: 14px;
          background: #f0f0f0;
          position: relative;
          margin-top: 8px;
        }

        //小三角形
        .info-content::before {
          position: absolute;
          left: -8px;
          top: 8px;
          content: '';
          border-right: 10px solid #F0F0F0;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
        }
      }
    }

    .word-my {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 20px;

      img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }

      .info {
        width: 90%;
        margin-left: 10px;
        text-align: right;

        .time {
          font-size: 12px;
          color: rgba(51, 51, 51, 0.8);
          margin: 0;
          height: 20px;
          line-height: 20px;
          margin-top: -5px;
          margin-right: 10px;
        }

        .info-content {
          max-width: 70%;
          padding: 10px;
          font-size: 14px;
          float: right;
          margin-right: 10px;
          position: relative;
          margin-top: 8px;
          background: #A3C3F6;
          text-align: left;
        }

        //小三角形
        .info-content::after {
          position: absolute;
          right: -8px;
          top: 8px;
          content: '';
          border-left: 10px solid #A3C3F6;
          border-top: 8px solid transparent;
          border-bottom: 8px solid transparent;
        }
      }
    }
  }

  .chat-message {

    .chooseImage {
      width: 30px;
      height: 30px;
      margin-left: 5px;
    }

    .recordBtn {
      display: inline-block;
      width: 800px;
      margin-left: 5px;
      font-size: 13px;
      color: #606266;
      text-align: center;
      border: 1px solid #dcdfe6;
      padding: 0 15px;
      border-radius: 4px;
      box-sizing: border-box;
      height: 35px;
      line-height: 35px;
      transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    }

    .input {
      margin-left: 5px;
    }

    //border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    //height: 25px;
    //line-height: 25px;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 95%;
    z-index: 99;
    background: #ffffff;

    .chat-button {
      display: flex;
      justify-content: center;
      align-items: center;

      .send {
        margin-left: 8px;
        background-color: rgba(242, 150, 0, 1);
        border: rgba(242, 150, 0, 1);
      }

      > div {
        margin-left: 10px
      }
    }
  }
}
</style>
